<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>render</title>
	<style type="text/css">
		.yellow{
			background: yellow;
		}
	</style>
</head>
<body>
	<div id="app"></div>
</body>
</html>
<script src="../2.1.8/vue.js"></script>
<script>
	// createElement(tagName,[data-object],childrenElement)
	// 1. tagName : 标签名
	// 2. data-object ： 数据对象，如属性，id等以键值对的形式设置( 可以省略 )，使用指定绑定
	// 3. childrenElement ： 子元素
	//  	注意这里必须通过绑定的方式设置 class

	const vm = new Vue({
		el : '#app',
		render(createElement){
			return createElement(
				"ul", // 标签
				{
					'class' : {
						yellow : true
					},
					style : {
						fontSize : '30px',
						borderColor:'red',
						borderWidth:'2px',
						borderStyle : 'solid'
					},
					attrs : {
						id : 10,
						attr : 'attr'
					},
					domProps : {
						innerHTML : '<li>我是一个 li 标签</li>'
					}
				},
				[
					createElement( "li", 1 ),
					createElement( "li", 2 ),
					createElement( "li", 3 )
				]
			)
		}
	});
</script>